<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zyupload全部功能上传实例</title>
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" th:href="@{Layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" href="zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">


        <div id="zyupload" class="zyupload"></div>
        <button type="button" class="layui-btn layui-btn-normal"  style="margin-top: -120px;background-color:#00b7ee;border: none"  onclick="uploadRest()">
            <i class="fa fa-refresh"></i> 重 置
        </button>
    </div>
</div>
<!--<script type="text/javascript" src="zyupload/jquery-1.7.2.js"></script>-->
<script src="Layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="zyupload/zyupload-1.0.0.min.js"></script>


<script type="text/javascript">


        $(function(){
            // 初始化插件
            $("#zyupload").zyUpload({
                width            :   "650px",                 // 宽度
                height           :   "400px",                 // 宽度
                itemWidth        :   "140px",                 // 文件项的宽度
                itemHeight       :   "115px",                 // 文件项的高度
                url              :   "/upload/UploadAction",  // 上传文件的路径
                fileType         :   ["jpg","png","txt","sql","js","exe","xlsx","doc","xls","pdf","ppt","zip","rar","mp3","mp4"],// 上传文件的类型
                fileSize         :   51200000,                // 上传文件的大小
                multiple         :   true,                    // 是否可以多个文件上传
                dragDrop         :   true,                    // 是否可以拖动上传文件
               // tailor           :   true,                    // 是否可以裁剪图片
                del              :   true,                    // 是否可以删除文件
                finishDel        :   false,  				  // 是否在上传文件完成后删除预览
                /* 外部获得的回调接口 */
                onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                    console.info("当前选择了以下文件：");
                    console.info(selectFiles);
                },
                onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                    console.info("当前删除了此文件：");
                    console.info(file.name);
                },
                onSuccess: function(file, response){          // 文件上传成功的回调方法
                    console.info("此文件上传成功：");
                    console.info(file.name);
                    console.info("此文件上传到服务器地址：");
                    console.info(response);
                    //js中json转对象
                    var str2 =  JSON.parse(response)

/*                    console.info(str2.filename);
                    console.info(str2.filesize);
                    console.info(str2.dir);*/

                    $("#uploadInf").append("<p>文件上传成功！"+"<br>"+
                          "文件名："+str2.filename +"<br>"+
                          "文件大小："+str2.filesize +"<br>"+
                          "文件路径："+str2.dir +"<br>"+
                        "</p>");
                },
                onFailure: function(file, response){          // 文件上传失败的回调方法
                    console.info("此文件上传失败：");
                    console.info(file.name);
                },
                onComplete: function(response){           	  // 上传完成的回调方法
                    console.info("文件上传完成");
                    console.info(response);
                }
            });

        });



function uploadRest(){
        //layer.msg("点击了重置方法");
        window.location.reload();
    }
</script>

</body>
</html>